<template>
    <div class="GyButton" @click="$emit('click')">
        <gy-icon v-if="fontName" :fontName="fontName"/><slot name="title"></slot>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Prop} from 'vue-property-decorator'
    import GyIcon from "./GyIcon.vue";

    @Component({
        name: 'GyButton',
        components: {GyIcon}
    })
    export default class extends Vue {
        @Prop()
        private fontName: string | undefined;
        // @Prop()
        // private title!: string;
    }
</script>

<style scoped lang="less">
    .GyButton {
        display: inline-flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        position: relative;
        border-radius: 0.1rem;
        overflow: hidden;
        padding: 0.2rem;
        font-size: 0.32rem;
        user-select: none;
        & span {
            padding-right: 0.2rem;
        }
        &::after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: 2;
        }
        &:active::after {
            background-color: rgba(255, 255, 255, .4);
        }
    }
</style>
